<script setup lang="ts">
import { ref } from 'vue'
import NavBar from '@/components/NavBar.vue'

interface Message {
  id: string
  title: string
  content: string
  time: string
  avatar: string
}

const messages = ref<Message[]>([
  {
    id: '1',
    title: '系统通知',
    content: '您的物品认领申请已通过审核',
    time: '2024-04-08 10:30',
    avatar: '/static/images/system-avatar.png'
  },
  {
    id: '2',
    title: '物品认领',
    content: '有人认领了您发布的物品',
    time: '2024-04-08 12:15',
    avatar: '/static/images/user-avatar.png'
  }
])
</script>

<template>
  <view class="container">
    <NavBar 
      title="消息中心" 
      :showBack="true"
    />
    <view class="page-content">
      <view class="message-list">
        <view 
          class="message-item card fade-in" 
          v-for="(message, index) in messages" 
          :key="index"
        >
          <view class="message-avatar">
            <image :src="message.avatar" mode="aspectFill" />
          </view>
          <view class="message-content">
            <view class="message-title">{{ message.title }}</view>
            <view class="message-text">{{ message.content }}</view>
            <view class="message-time">{{ message.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@use '@/uni.scss' as *;

.container {
  min-height: 100vh;
  background-color: $background-color;
  padding-top: 200rpx;
}

.page-content {
  padding: $spacing-sm;
  height: calc(100vh - 200rpx);
  overflow-y: auto;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  
  .message-item {
    display: flex;
    gap: $spacing-base;
    padding: $spacing-base;
    
    .message-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: $border-radius-circle;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .message-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $spacing-xs;
      
      .message-title {
        font-size: $font-size-base;
        font-weight: 500;
        color: $text-color;
      }
      
      .message-text {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
      
      .message-time {
        font-size: $font-size-sm;
        color: $text-color-disabled;
      }
    }
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>